<template>
  <div class="container">
    <div class="jumbotron">
      <h1>{{keywords}}</h1>
      <p></p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">收藏</a></p>
    </div>
    <ul class="list-group">
      <li class="list-group-item" v-for="song in songs"><router-link :to="'\/music\/'+song.id">{{song.name}}</router-link></li>
    </ul>
    <nav aria-label="Page navigation" v-if="status==200">
      <ul class="pagination">
        <li>
          <a @click="previous" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li
          style="cursor: pointer"
          :key="n"
          v-for="n in pages"
          :class="{active:offset/30==n-1}"><a @click="search233(keywords,offset,30,n)">{{n}}</a></li>
        <li>
          <a @click="next" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
  import search_result from '../request/req'
  import search_list from './search_list'

  export default {
    name: "search",
    data() {
      return {
        result: '',
        songs:'',
        offset: 0,
        currentPage: 0,
        total: 0,
        pages: 0,
        status:''
      }
    },watch:{
      deep:true,
      keywords(){
        search_result(this.keywords, this.offset, 30).then(res => {
          if (res.data.code != '200') {
            alert("查询出错");
            return;
          }
          this.songs = res.data.result.songs;
          this.total = res.data.result.songCount;
          this.pages = Math.floor(this.total / 30);
          console.log(res);
        })
      }
    },
    components: {search_list},
    methods: {
      search233(a, b, c,n) {
        b=(n-1)*30;
        this.offset = b;
        search_result(a, b, c).then(res => {
          if (res.data.code != '200') {
            alert("查询出错");
            return;
          }
          this.status=res.data.code;
          this.songs = res.data.result.songs;
          this.total = res.data.result.songCount;
          this.pages = Math.floor(this.total / 30);
          console.log(res);
        });
      },
      next(){
        if(this.offset+30>=this.total){
          alert("没有下一页")
          return ;
        }
        this.search233(this.keywords,this.offset,30,this.offset/30+2)
      },previous(){
        if(this.offset==0){
          alert("没有上一页")
          return ;
        }
        this.search233(this.keywords,this.offset,30,this.offset/30)
      }

    },
    computed: {
      keywords() {
        return this.$route.query.keywords
      }
    }, mounted() {
      search_result(this.keywords, this.offset, 30).then(res => {
        if (res.data.code != '200') {
          alert("查询出错");
          return;
        }
        this.status=res.data.code;
        this.songs = res.data.result.songs;
        this.total = res.data.result.songCount;
        this.pages = Math.floor(this.total / 30);
        console.log(res);
      })
    }

  }
</script>

<style scoped>

</style>
